<template>
  <div>
    <el-tag v-if="operateFlag !== 'DETAIL'" type="warning" class="special-tip">注：文本/素材/二维码要同时发送只支持 pc，手机单次只能发一个类型内容。</el-tag>
    <div class="dialog-wrap">
      <el-form ref="copyForm" :model="copyForm" :rules="rules" label-width="100px" label-position="right"
        style="position: relative">
        <el-form-item label="标题" prop="title">
          <el-input v-model="copyForm.title" popper-class="minWidth-inp" style="width: 90%" :maxlength="32" show-word-limit placeholder="请输入" :disabled="operateFlag == 'DETAIL'">
          </el-input>
        </el-form-item>
        <el-form-item label="发送时间" prop="sendType" required>
          <el-radio-group v-model="copyForm.sendType" @change="changeRadio">
            <el-radio v-for="item in sendTimeList" :key="item.label" :label="item.label" :disabled="operateFlag == 'DETAIL'">{{ item.value }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="" v-if="+copyForm.sendType === 1" prop="sendDate">
          <el-date-picker v-model="copyForm.sendDate" type="datetime" style="width: 90%" :editable="false" placeholder="选择日期时间" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" :disabled="operateFlag == 'DETAIL'">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="" v-if="+copyForm.sendType === 2" prop="sendCycle">
          <el-checkbox-group v-model="copyForm.sendCycle" :disabled="operateFlag == 'DETAIL'">
            <el-checkbox-button v-for="item in weekList" :label="item.dictValue" :key="item.dictValue">
              {{ item.dictLabel }}</el-checkbox-button>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="文本内容" prop="content">
          <el-input type="textarea" v-model="copyForm.content" popper-class="minWidth-inp" style="width: 90%" :maxlength="200" show-word-limit placeholder="请填写文本内容" :autosize="{ minRows: 4, maxRows: 6 }" :disabled="operateFlag == 'DETAIL'">
          </el-input>
        </el-form-item>
        <el-form-item v-if="copyForm.mediaContentDetails.length > 0 || operateFlag !== 'DETAIL'" label="选择素材" prop="mediaContentDetails" style="margin-bottom: -20px !important;">
          <NormalSelectMaterial v-if="operateFlag" :selectedList="copyForm.mediaContentDetails" :disabled="operateFlag == 'DETAIL'" @confirmSelect="confirmSelectFn" />
        </el-form-item>
        <el-form-item v-if="copyForm.activityName || operateFlag !== 'DETAIL'" label="二维码" prop="qrState">
          <NormalQrCode :disabled="operateFlag == 'DETAIL'" :codeInfo="codeParams" @selectedSure="qrCodeConfrim" @deleteSeletedQrcode="deleteSeletedQrcode" />
        </el-form-item>
      </el-form>
    </div>
    <div v-if="operateFlag !== 'DETAIL'" style="text-align: right;">
      <el-button type="info" plain class="dialog-btn2" @click="copyWritingCancel">取消</el-button>
      <el-button type="primary" @click="contentConfirm">确定</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "CopyWriting",
  props: {
    weekList: {
      type: Array,
      default: () => [],
    },
    sendTimeList: {
      type: Array,
      default: () => [],
    },
    editIndex: {
      type: Number,
      default: null,
    },
    detailForm: {
      type: Object,
      default: () => {}
    },
    operateFlag: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      writingVisible: false,
      copyForm: {
        title: '', // 文案内容
        sendType: '',
        sendDate: '', // 发送时间
        sendCycle: [], // 周期提醒
        mediaContentDetails: [], // 素材
        qrState: '1',
        messagePushId: '',
      },
      nowTime: [], // 存放当前时间
      codeParams: {
        qrState: '1',
        qrType: '',
        activityName: '',
        codeUrl: '',
        qrId: ''
      },
      rules: {
        title: [
          { required: true, message: "请输入标题", trigger: "blur" },
        ],
        sendType: [
          { required: true, message: "请选择发送时间", trigger: "change" },
        ],
        sendDate: [
          { required: true, message: "请选择指定日期", trigger: "change" },
        ],
        sendCycle: [
          { required: true, message: "请选择周期提醒", trigger: "change" },
        ],
        content: [
          { required: true, message: "请输入文本内容", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.copyForm = this.detailForm
    if (this.operateFlag != 'ADD')
      this.codeParams = {
        qrState: this.detailForm.qrState,
        qrType: this.detailForm.qrType,
        activityName: this.detailForm.activityName,
        codeUrl: this.detailForm.qrCode || this.detailForm.codeUrl
      }
  },
  methods: {
    // 发送时间按钮切换
    changeRadio() {
      this.$refs.copyForm.validateField("sendDate")
      this.$refs.copyForm.validateField("sendCycle")
    },
    // 取消按钮
    copyWritingCancel() {
      this.$emit('copyWritingCancel', false)
    },
    // 确认
    contentConfirm() {
      let data = {
        copyForm: { ...this.copyForm, ...this.codeParams },
        editIndex: this.editIndex,
      };
      this.$refs["copyForm"].validate((valid) => {
        if (valid) {
          if (this.copyForm.mediaContentDetails.length > 9) {
            this.$message.error("所有素材不能超过九个！")
            return
          }
          if (+this.codeParams.qrState === 0 && !this.codeParams.activityName) {
            this.$message.error("请选择二维码！")
            return
          }
          this.$emit("copyWritingSure", data);
        }
      });
    },
    // 确定选择的素材
    confirmSelectFn(val) {
      this.copyForm.mediaContentDetails = val;
    },
    // 删除二维码
    deleteSeletedQrcode() {
      this.codeParams.qrType = '';
      this.codeParams.activityName = '';
      this.codeParams.codeUrl = '';
      this.codeParams.qrId = '';
    },
    qrCodeConfrim(data) {
      if (data) {
        this.codeParams = {
          qrState: data.qrState,
          qrType: data.qrType,
          activityName: data.activityName,
          codeUrl: data.qrCode || data.codeUrl,
          qrId: data.qrId
        }
      } else {
        this.codeParams = {
          qrState: 1,
          qrType: '',
          activityName: '',
          codeUrl: '',
          qrId: ''
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/styles/base.scss";
.special-tip{
  width: 100%;
  font-size: 14px;
  padding: 6px 10px;
  height: auto;
  margin-bottom: 10px;
}
.wrap {
  @include titleWrap;
}

.dialog-wrap {
  display: flex;
  justify-content: flex-start;

  .dialog-list {
    width: 33%;
    padding: 0 15px;
    box-sizing: border-box;
    max-height: 500px;
    overflow: auto;

    &:nth-child(2) {
      flex: 1;
      border-left: $normalBorder;
      border-right: $normalBorder;
    }
  }

  .block-wrap {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    font-weight: 400;
    color: #2a2a2a;
    font-size: 12px;
    font-family: PingFangSC-Medium, PingFang SC;

    .block-item {
      width: 80px;
      padding: 5px 0;
      margin: 10px;
      border: $normalBorder;
      text-align: center;

      .svg-icon {
        width: 4em;
        height: 3em;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
        margin-top: 12px;
      }

      div {
        margin-top: -10px;
      }
    }
  }

  .upload-list {
    display: flex;
    justify-content: space-between;
    border: $normalBorder;
    padding: 0 10px;
  }
}

.copy-card {
  width: 740px;
  background-color: #fafafa;
  position: relative;
  margin: 10px;

  .content-item {
    width: 400px;
    background-color: #e9e9e9;
    padding: 0 10px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
  }

  .copy-edit {
    position: absolute;
    top: 20px;
    right: 20px;
  }

  .right-close {
    position: absolute;
    right: -2px;
    top: -2px;
  }
}

::v-deep .v-modal {
  width: 0 !important;
  height: 0;
  position: relative;
  top: 0;
  left: 0;
}
</style>
